@font-face {
    font-family: 'HONOR Sans';
    src: url(HONORSans-Regular.ttf) format('truetype');
}
html{font-size:14px;font-family: 'HONOR Sans';}
body,h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}
a{text-decoration: none;color:black;}
ul,li{list-style: none;}
.fl{float:left;}
.fr{float:right;}
.clearfix{clear: both;}
.vl{width:0;height:70%;border-left:1px solid #aaa;border-right:1px solid #fff;overflow: hidden;float:left;margin-left:7px;}
.hl{width:99%;height:0%;border-top:1px solid #aaa;border-bottom:1px solid #fff;overflow: hidden;margin-top:7px;}
input[type='date'],input[type='text'],input[type='number'],input[type='password'],textarea{border:1px solid #ccc;outline: none;padding:3px;}
input[type='date']:focus,input[type='text']:focus,input[type='number']:focus,input[type='password']:focus,textarea:focus{border-color: dodgerblue;}


fieldset legend{font-weight: bold;color:#514c4c}

.f12{font-size: 12px !important;}

.w200{width:200px !important}
.w300{width:300px !important}
.w400{width:400px !important}

.h100{height:100px !important}

.ml10{margin-left:10px}
.ml15{margin-left:15px}

.card{box-shadow: 0 0 5px #ccc;padding:20px;height:calc(100% - 40px);overflow:auto}
.card h2{font-size: 16px;color: dodgerblue;border-bottom:1px solid dodgerblue;padding-bottom:10px;margin-bottom:20px;}

.empty{color:#666;padding:30px 0;text-align: center;}
.hide{display:none !important}
.paginate{display:flex;align-items: center;justify-content: right;padding:0 15px;}
.paginate select{height:20px;margin-left:4px;margin-right:10px;}
.paginate ul{display:flex;}
.paginate li{height: 20px;line-height: 20px;border-radius: 1px;margin-right:10px;}
.paginate li a,.paginate li span{display:block;padding:0 7px;border:1px solid #ccc;}
.paginate li a:hover{color:dodgerblue;border-color: dodgerblue;}
.paginate li span{color:#999;}


.modal{position:fixed;top:10%;left:50%;border:1px solid #ccc;display:none}
.modal .modal-row{background-color: #fff;width:200px;height:250px;box-shadow: 0 0 5px #000;z-index:10;position:relative;}
.modal::before{position:fixed;content:'';display:block;width:100vw;height:100vh;background-color: #000;opacity: 0.5;left:0;top:0;z-index:9}
.modal h2{font-size: 13px;height:30px;line-height: 30px;text-indent: 7px;background-color: dodgerblue;color:#fff;}
.modal > .body,.modal form > .body{width:calc(100% - 30px);padding:10px 15px;height:calc(100% - 85px);overflow: hidden;overflow-y: auto;}
.modal .foot{height:35px;padding:0 7px;line-height: 35px;text-align: center;border-top:1px solid #ccc;}
.modal .icon-close{position:absolute;top:7px;right:3px;z-index:11;cursor: pointer;}

.form-item{display:block;margin:5px 0}
.form-item .label{font-weight: bold;font-style: italic;}
div[required=true] .label::before,div[required=true] label::before{content:'*';color:red;}
.form-item .input{margin-bottom:15px;}
.form-item .input input[type="text"],.form-item .input input[type="password"],.form-item .input input[type="date"],.form-item .input textarea{width:100%;padding:5px}
.form-item .input input[type="number"]{padding:5px;}
.form-item .input textarea{height:5em;resize: none;}
.form-item .radio-group{border:1px solid #ccc;padding:5px;width:calc(100% - 5px)}
.form-item .radio-group label{margin-right:10px;}
.search-box .input{position:relative}
.search-box .input .icon-search{position:absolute;right:1px;top:6px;font-size:13px;}

.search-result-box{width:180px;height:200px;border:1px solid #ccc;overflow: hidden;overflow-y: auto;position:absolute;top:25px;background-color: #fff;}
.search-result-box li{padding:7px;color:dodgerblue}
.search-result-box li:hover{background-color: #eee;}
.search-result-box li.active{background-color: #e4e4e4 !important;}

.top{height:33px;line-height: 33px;background-color: dodgerblue;position:relative;display: flex;background-image: url(/image/bg.jpg);}
.top::after{content:'';border-bottom:1px solid #ccc;height:0;overflow:hidden;display:block;bottom:0;position:absolute;width:100%;}
.logo{text-align: left;text-indent: 2em; width:60%;overflow: hidden;font-weight: bold; font-size: 18px;color:#fff;text-shadow: 1px 1px 1px #000;background: linear-gradient(to right, dodgerblue, transparent);}
.user-info{font-size: 12px;color:#fff;display:flex;justify-content: right;width:50%;padding-right:30px;align-items: center;background: linear-gradient(to left, dodgerblue,dodgerblue, transparent);}
.user-info > div{padding:0 7px}
.user-info .iconfont{font-size:11px;margin-left:5px;}
.user-info .user-act{position: relative;}
.user-info .user-act .act-sheel{position:absolute;top:32px;right:-10px;width:150px;background-color: #fff;border:1px solid #ccc;display:none;z-index: 999;}
.user-info .user-act .act-sheel .iconfont{font-size:13px;margin-right:3px;}
.user-info .user-act .act-sheel a{display:block;}
.user-info .user-act .act-sheel a:hover{background-color: rgb(233, 238, 243);}
.user-info .user-act:hover .act-sheel{display:block;}
.act-btns{height:30px;display:flex;align-items: center;}
.act-btns .button{border:none;background-color: #fff;color:dodgerblue;cursor: pointer;font-size: 12px;vertical-align: middle;padding:5px 10px;position:relative;border:1px solid transparent}
.act-btns .button span.iconfont{font-size:14px;}
.act-btns .button span{float:left;height:15px;line-height: 15px;margin-right:3px;}
.act-btns .button .icon-add-member{color:coral}
.act-btns .button .icon-arrowdown{margin-left:5px;font-size: 12px !important;}
.act-btns .button .icon-close{color:coral}
.act-btns .button.popup .action-shell{top:25px;border:1px solid dodgerblue;color:dodgerblue;display:none;position:absolute;min-width:100px;left:-1px;background-color: #fff;text-align: center;z-index:9999}
.act-btns .button.popup:hover .action-shell{display: block;}
.act-btns .button.popup .action-shell li{padding:7px 0;}
.act-btns .button.popup .action-shell li:hover{background-color: #eee;}
.act-btns .button:hover{color:dodgerblue;border:1px solid dodgerblue;background-color: dodgerblue;color:#fff}
.act-btns .button:hover span.iconfont{color:#fff}
.page-container{height:calc(100% - 33px);width:100%;overflow: hidden;}

#container{height:100vh;}
#container .topPage{width:100%;height:100%;}
.left-menu{float:left;width:150px;height:100%;border-right:1px solid #ccc;background-color: #fff;padding-top:30px;box-shadow: 2px 1px 3px #e4e4e4;}
.left-menu .hl{margin-left:7px;}
.left-menu .lm-ctn{border-right:1px solid #fff;height:100%}
.left-menu .menus li{width:100%;height:35px;line-height: 35px;text-indent: 1em;font-size:12px;}
.left-menu .menus li:hover{background-color: #e9e9e9;}
.left-menu .menus li a{display:block;}
.left-menu .menus li.active{background:#e4e4e4;}
.left-menu .menus li.active a{display:block;color:rgb(0, 128, 255);}
.left-menu .menus li .iconfont{font-size: 14px;margin-right:3px;}

#right-page{width: calc(100% - 182px);height:calc(100% - 30px);float:left;padding:15px;}

.page-tabs{width:calc(100% - 410px)}
.page-tabs .scroll-row{width:100%;overflow: hidden;height: 100%;}
.page-tabs .tag-top,.page-tabs .tag-bottom{position:absolute;top:0;width:20px;text-align:center;position: pointer;height:15px;display:block;background-color:#e0e0e0;right:0;cursor: pointer;box-shadow: -1px 0px 3px #999;z-index:2;}
.page-tabs .tag-top:hover,.page-tabs .tag-bottom:hover{background-color: #cfcfcf;}
.page-tabs .tag-bottom{top:15px;}
.page-tabs ul{margin-left:7px;width:100000px;height:100%;}
.page-tabs li{padding:0 10px;padding-right:22px;border:1px solid #ccc;float:left;border-bottom:none;height:28px;line-height: 28px;margin-top:4px;font-size: 12px;cursor: default;z-index:1;position:relative;min-width: 50px;text-align: center;}
.page-tabs li.active{background-color: #fff;font-weight: bold;color:dodgerblue}
.page-tabs li:hover{color: rgb(28, 118, 208);}
.page-tabs li span{font-size: 10px;position:absolute;right:0px;top:0px;cursor: pointer;height:12px;width:12px;line-height: 12px;text-align: center;border-radius: 2px;}
.page-tabs li span:hover{color:rgb(208, 0, 0);background-color: #eee;font-weight: bold;}

.list-table{border:1px solid #ccc;height:100%;overflow: hidden;font-size: 12px;box-shadow: 0px 0px 5px #ccc;overflow-x: auto;}
.list-table.has-btn{height: calc(100% - 30px);}
.list-table .tr{width:100%;border-bottom:1px solid #ccc;height:30px;line-height: 30px;overflow: hidden;}
.list-table .tr:hover{background-color: #fff6d1;}
.list-table .head{min-width:100%;}
.list-table .head .tr{height:34px;background-color: #efefef;line-height: 28px;border-bottom: 1px solid #ccc;}
.list-table .th{float:left;min-width:40x;border-right:1px solid #ccc;text-align: center;padding:3px;border-left:1px solid #fff;position:relative;}
.list-table .body{overflow:auto;height:calc(100% - 70px);border-bottom:1px solid #ccc;min-width: 100%;}
.list-table .body.no-foot{overflow:auto;height:calc(100% - 35px);border-bottom:none;}
.list-table .td{float:left;min-width:40x;border-right:1px solid #ccc;text-align: center;padding:3px;border-left:1px solid #fff;overflow: hidden;line-height: 24px;min-height:100%;}
.list-table .td input[type="text"],.list-table .td input[type="number"],.list-table .td input[type="date"]{width:calc(100% - 10px);}
.list-table .td input[type="date"]{padding:2px;}
.list-table .td textarea{height:17px;resize: none;}
.list-table .td.btns span{cursor: pointer;color:dodgerblue;font-size: 13px;display:none}
.list-table .tr:hover .td.btns span{display:inline-block}
.list-table .th.index,.list-table .td.index{padding-left:7px;text-align: left;}
.list-table .foot{height:35px;line-height: 35px;display:flex;align-items: center;}

.list-table .head .th .sort-tag{display:inline-block;vertical-align: middle;cursor: pointer;}
.list-table .head .th .sort-tag .iconfont{width:18px;height:6px;display:block;top:3px;font-size:12px;text-align: center;line-height: 6px;color:#999}
.list-table .head .th .sort-tag .checked{color:#222}

.list-table .head .th .filter-tag{display:inline-block;vertical-align: middle;cursor: pointer;position:absolute;right:0px;}
.list-table .head .th .filter-tag .iconfont{width:18px;height:33px;display:block;top:3px;font-size:12px;text-align: center;line-height: 33px;color:#999}
.list-table .head .th .filter-tag.hover{background-color: #fff;border:1px solid #e4e4e4}

.g-filter-box{position:absolute;border:1px solid #ccc;background-color: #fff;z-index: 1000;min-width:180px;padding:10px;background-color: #dfe4ea;}


.g-filter-box .input{display:inline-block;padding:7px;}
.g-filter-box input:not([type='radio']){width:120px;height:20px;padding:3px;}
.g-filter-box input[type='number']{width:60px;text-align: center;}
.g-filter-box button{display:inline-block;margin-left:3px;margin-top:7px;border:none;background-color: dodgerblue;color:#fff;height:26px;cursor: pointer;padding:0 7px;}
.g-filter-box .radio-group{min-width:100px;}
.g-filter-box .radio-group li,.g-filter-box .checkbox-group li{height:20px;line-height: 20px;color:dodgerblue;padding:4px 7px;cursor: pointer;}
.g-filter-box .checkbox-group li{cursor: default;}
.g-filter-box .radio-group li:hover{background-color: #e4e4e4;}

.g-filter-box .date-range,.g-filter-box .num-range{height:30px;line-height: 30px;}
.g-filter-box .date-range li,.g-filter-box .num-range li{float:left;margin-left:7px;}

.tree.root{display:flex;}
.tree .node{margin:0 10px;text-align: center;}
.tree .node > span{border:1px solid #ccc;background-color:bisque;padding:5px 7px;display:inline-block;position:relative;font-size: 14px;font-weight: bold;min-width:4em;}
.tree .node > span:before{content:'';display:inline-block;position:absolute;top:-30px;width:0px;height:30px;overflow: hidden;border-left:1px solid #999;left:50%;}
.tree .node > span:after{content:'';display:inline-block;position:absolute;bottom:-22px;width:0px;height:22px;overflow: hidden;border-left:1px solid #999;left:50%;}
.tree .children{display:flex;justify-content: center;margin:50px 0;position: relative;}
/* .tree .children:before{content:'';display:block;height:0;overflow: hidden;top:-30px;border-top:1px solid #999;width:100%;left:0;position:absolute;} */

.tree.root > .node > span:before{display:none;}
.tree .node > span:last-child:after{display:none}
.tree > .node span i{display:block;font-size:12px;font-weight: normal;color:crimson}

.label-item{padding:10px;display:flex;font-size: 16px;}
.label-item .label{min-width:90px;text-align: right;color:#999;}
.label-item .label:after{content:':';display:inline-block;margin-right:7px;}